<template>
	<view>
		<view class="mask" :class="show ? 'active' : ''" @click="onCanle"></view>
		<view class="main" :class="show ? 'active process-sear-move' : 'process-move-top'">
			<slot name="body">
				<view class="mgl10 mgr10 border-bottom bagW">
					<view class="mainHead d-flex align-center pd10">
						<image class="img" :src="titles.src ? titles.src : defaultImage"></image>
						<view class="pdl10 d-flex flex-direction justify-center">
							<text>{{titles.name}}</text>
							<text>{{titles.content}}</text>
						</view>
					</view>
				</view>
				<inputComp
					:title="options.title"
					:type="options.type"
					:placeholder="options.placeholder"
					:defaultValue="options.value"
					@onChange="onChange"
					titleStyle="padding-bottom:10px;"
				/>
				<view class="fbottom d-flex align-center">
					<view @click="onCanle" class="wp50 oc hp100 d-flex align-center justify-center action-hover cancel fs16 text-333 text-center">取消</view>
					<view @click="oK" class="wp50 hp100 ok d-flex align-center justify-center action-hover fs16 defaultColor text-center">同意</view>
				</view>
			</slot>
		</view>
	</view>
</template>

<script>
	import inputComp from "../input-comp/input-comp.vue"
	export default {
		name:'ApproveModal',
		components:{
			inputComp
		},
		props:{
			titles:{
				type:Object,
				default:()=>{
					return {
						scr:'',
						name:'',
						content:''
					}
				},
			},
			options:{
				type:Object,
				default:()=>{
					return {
						title:'审批意见',
						type:'textarea',
						placeholder:'请输入审批意见（选填）',
						value:''
					}
				}
			}
		},
		watch:{
			options(values){
				this.value = values.value || "";
			}
		},
		computed:{
			defaultImage(){
				return this.globalCode && this.globalCode.defaultImage ? this.globalCode.defaultImage : ''
			},
		},
		created() {
			this.value = this.options.value || "";
		},
		data(){
			return {
				value:"",
				show:false
			}
		},
		methods:{
			open(){
				this.show = !this.show;
			},
			oK(){
				this.handleChange();
				this.open();
			},
			onCanle(){
				this.open();
			},
			handleChange(){
				this.$emit('onChange',{
					value:this.value || ""
				});
			},
			onChange(values){
				let { value } = values;
				this.value = value;
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "../common/common.scss";
	.mask{
		position: fixed;
		z-index: 20;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		display: none;
	}
	.active {
		display: block !important;
	}
	.main{
		border-bottom-left-radius: 20upx;
		border-bottom-right-radius: 20upx;
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		z-index: 99;
		display: none;
		.mainHead{
			.img{
				height: 100upx;
				width: 100upx;
				border-radius: 50%;
				// background-color: #BBBBBB;
			}
		}
		.fbottom{
			border-top:1upx solid #E5E5E5;
			height: 100upx;
			.cancel{
				border-right:1upx solid #E5E5E5;
			}
			.oc{
				border-bottom-left-radius: 20upx;
			}
			.ok{
				border-bottom-right-radius: 20upx;
			}
		}
	}
	.process-move-top {
		animation-name: process-move-top;
		animation-duration: .3s !important;
	}
	.process-sear-move{
		animation-name: process-sear-move;
		animation-duration: .3s !important;
	}
	@keyframes process-sear-move {
		0% {
			top: -50%;
		}
		100% {
			top: 1%;
		}
	}
	@keyframes process-move-top {
		0% {
			top: 1%;
		}

		100% {
			top: -50%;
		}
	}
</style>
